<template>
<div class="root">
    <router-link to="/" class="home">
        <img class="home" src="../../../static/play/shouye.png">
    </router-link>
    <div @click="closeVideo">
        <img class="back" src="../../../static/play/fanhui.png">
    </div>
    <img id="encyclopedia" class="百科" src="../../../static/play/baike.png" @click="baike">
    <img id="soundEffect" class="音效" src="../../../static/play/yinxiao.png" @click="yinxiao">
    <img id="en" class="英" src="../../../static/play/english.png" @click="english">
    <img id="zh" class="中" src="../../../static/play/chinese.png" @click="chinese">
    <div class="videoarea">
        <video width="1280" height="720" autoplay="autoplay" loop="loop">
            <source :src="videosrc" type="video/mp4">
        </video>
        <audio id="chinese" autoplay>
            <source :src="chinesesrc" type="audio/mpeg">
        </audio>
        <audio id="english">
            <source :src="englishsrc" type="audio/mpeg">
        </audio>
        <audio id="yinxiao">
            <source :src="yinxiaosrc" type="audio/mpeg">
        </audio>
        <audio id="baike">
            <source :src="baikesrc" type="audio/mpeg">
        </audio>                     
    </div>
</div>
</template>

<script>
export default {
  name: 'video-ar',
  data () {
    return {
      backname: ''
    }
  },
  props: [
    'chinesesrc',
    'englishsrc',
    'yinxiaosrc',
    'baikesrc',
    'videosrc'
  ],
  mounted () {
    let that = this
    that.chinesesrc = that.chinesesrc
    that.englishsrc = that.englishsrc
    that.yinxiaosrc = that.yinxiaosrc
    that.baikesrc = that.baikesrc
    that.videosrc = that.videosrc
    console.log(that.chinesesrc)
    console.log(that.englishsrc)
  },
  methods: {
    chinese: function () {
      var audio1 = document.querySelector('#chinese')
      var audio2 = document.querySelector('#english')
      var audio3 = document.querySelector('#yinxiao')
      var audio4 = document.querySelector('#baike')
      audio1.play()
      audio2.pause()
      audio3.pause()
      audio4.pause()
      audio2.currentTime = 0.0
      audio3.currentTime = 0.0
      audio4.currentTime = 0.0
    },
    english: function () {
      var audio1 = document.querySelector('#chinese')
      var audio2 = document.querySelector('#english')
      var audio3 = document.querySelector('#yinxiao')
      var audio4 = document.querySelector('#baike')
      audio1.pause()
      audio2.play()
      audio3.pause()
      audio4.pause()
      audio1.currentTime = 0.0
      audio3.currentTime = 0.0
      audio4.currentTime = 0.0
    },
    yinxiao: function () {
      var audio1 = document.querySelector('#chinese')
      var audio2 = document.querySelector('#english')
      var audio3 = document.querySelector('#yinxiao')
      var audio4 = document.querySelector('#baike')
      audio1.pause()
      audio2.pause()
      audio3.play()
      audio4.pause()
      audio1.currentTime = 0.0
      audio2.currentTime = 0.0
      audio4.currentTime = 0.0
    },
    baike: function () {
      var audio1 = document.querySelector('#chinese')
      var audio2 = document.querySelector('#english')
      var audio3 = document.querySelector('#yinxiao')
      var audio4 = document.querySelector('#baike')
      audio1.pause()
      audio2.pause()
      audio3.pause()
      audio4.play()
      audio1.currentTime = 0.0
      audio2.currentTime = 0.0
      audio3.currentTime = 0.0
    },
    closeVideo: function () {
      console.log('close video')
      this.$emit('closeVideo')
    }
  }
}
</script>

<style scoped>
.root {
    width: 1280px;
    height: 720px;
    background-color: black;
    z-index: 20;
    overflow: hidden;
}
img {
    position: absolute;
}
.home {
    top: 50px;
    left: 30px;
    z-index: 10;
}
.back {
    top: 150px;
    left: 30px;
    z-index: 10;
}
.videoarea {
    height:720px;
    width:1280px;
}
#encyclopedia {
    top: 250px;
    left: 30px;
    z-index: 10;
    cursor: pointer;
}
#soundEffect {
    top: 320px;
    left: 30px;
    z-index: 10;
    cursor: pointer;
}
#en {
    top: 390px;
    left: 30px;
    z-index: 10;
    cursor: pointer;
}
#zh {
    top: 460px;
    left: 30px;
    z-index: 10;
    cursor: pointer;
}
</style>
